<template>
    <div>msg-{{msg}}</div>
    <div>msg2{{msg2}}</div>
    <slot name="aaa" />
    <button @click="fn">按钮</button>

    <div> 
        <h2> x:{{x}},y:{{y}}</h2>
    </div>

<hr>

<input v-model="keyword" placeholder="搜索关键字" >
<p>{{keyword}}</p>
</template>

<script lang="ts">
import { defineComponent,onMounted,onUnmounted,ref } from 'vue'
import useMousePosition from "@/hooks/mousePosition"
import useDebouncedRef from "@/hooks/debouncedRef"
// // 自定义钩子函数
// function useMousePosition(){
//         // 初始化坐标
//         const x=ref(-1)
//         const y=ref(-1)

//         // 用于收集点击事件坐标的函数
//         const updatePosition=(e:MouseEvent)=>{
//             x.value=e.pageX
//             y.value=e.pageY
//         }
//         // 挂载后绑定点击监听
//         onMounted(()=>{
//             document.addEventListener("click",updatePosition)
//         })
//         // 卸载前解绑点击事件
//         onUnmounted(()=>{
//             document.removeEventListener("click",updatePosition)
//         })
//         return{x,y}
// }




export default defineComponent({
    props:["msg"],
    emits:["costom-event"],
    setup(props,{attrs,slots,emit}) {
        console.log(props,attrs,slots,emit);    
    // 描述emit触发自定义事件
        const fn=()=>{
            emit("costom-event",123);
        };
        
        const {x,y}=useMousePosition()
    //  customRef的使用
            const keyword = useDebouncedRef("",500)

        return{
            msg2:attrs.msg2,
            fn,
            x,
            y,
            keyword
        }
    },
})
</script>
